.b_ImageCarousel {

	/* padding-bottom: 116px; */

	/*Pager*/
	--swiper-pagination-bottom:-50px;
	--swiper-pagination-bullet-inactive-opacity:1;
	--swiper-pagination-bullet-size:12px;
	--swiper-pagination-bullet-horizontal-gap:12px;
	--pager_color:var(--color_deep_ocean);
	--swiper-pagination-bullet-inactive-color:var(--color_evergreen_medium);
	--swiper-navigation-size:80px;


	/*Mobile text*/
	--carousel-mobile-text-color: #000;

	/*Arrow Buttons*/
	--carousel-arrow-background-color: #dcdcdc;
	--carousel-arrow-foreground-color: #000;
	--carousel-arrow-size:44px;
	--button_color:var(--color_evergreen);


	/*Item Counts*/
	/*Defaults, but these get pulled in from the inline style tags*/
	--carousel-small-item-count:3;
	--carousel-medium-item-count:1;
	--carousel-large-item-count:1;

	/*Grid*/
	--carousel-gap:24px;

	/*Item Settings*/
	--carousel-aspect-ratio:16/10;

    /*These properties get updated by JS*/
	--carousel-total-items:1;
	--carousel-current-page:0;

	overflow: hidden;
}
/* increase padding If we only have a multiple slides */
.b_ImageCarousel:has([data-swiper-slide-index="1"]){
	padding-bottom:100px;
}
@media (width >= 1000px) {
	.b_ImageCarousel {
		/* padding-bottom: 200px; */

		--swiper-pagination-bottom:-60px;
		--swiper-pagination-bullet-size:16px;
		--swiper-pagination-bullet-horizontal-gap:42px;
	}

	/* reduce padding If we only have a single slide */
	.b_ImageCarousel:not(:has([data-swiper-slide-index="1"])){
		--section_padding_block:80px;
	}
	/* increase padding If we only have a multiple slides */
	.b_ImageCarousel:has([data-swiper-slide-index="1"]){
		padding-bottom:140px;
	}
}


/*Intro*/
.b_ImageCarousel .intro{
	max-width: 768px;
    text-align: center;
    margin-inline: auto;
    display: grid;
    gap: 20px;
	margin-bottom:48px;
}
@media (width >= 1000px) {
	.b_ImageCarousel .intro{
		gap: 24px;
		margin-bottom:80px;
	}
}

.b_ImageCarousel .swiper{
	overflow: visible;
}

.b_ImageCarousel .carousel {
	position:relative;
	--carousel-display-count:var(--carousel-small-item-count);
}
/*Medium*/
@media (width >= 600px) {
    .b_ImageCarousel .carousel {
    	--carousel-arrow-size:32px;
    	--carousel-display-count:var(--carousel-medium-item-count);
    }
}

/*Large*/
@media (width >= 1000px) {
    .b_ImageCarousel .carousel {
    	--carousel-display-count:var(--carousel-large-item-count);
    }
}


/*Wrapper*/
.b_ImageCarousel .carousel .wrapper{
	width: 100%;
	/*height: 87%;*/
	overflow: hidden;
	position: relative;
}

/*Track*/
.b_ImageCarousel .carousel .track {
    position: relative;
}


/*Contents*/
.b_ImageCarousel .carousel .contents {
    gap: var(--carousel-gap);
    grid-template-columns: repeat(
		var(--carousel-total-items), calc(100% / var(--carousel-display-count) - var(--carousel-gap) + (var(--carousel-gap) / var(--carousel-display-count))));
    grid-auto-flow: column;
    display: grid;
    position: relative;
	transform: translateX(calc( (-100% * var(--carousel-current-page)) + (-24px * var(--carousel-current-page) ) ) );
	transition: transform 0.3s linear;
}

/*Item*/
.b_ImageCarousel .item {
	height: 100%;
	overflow: hidden;
	border-radius: 30px;
}
@media (width >= 600px) {
	.b_ImageCarousel .item {
		border-radius: 70px;
	}
}
/*item - Image*/
.b_ImageCarousel .image{
	aspect-ratio: var(--carousel-aspect-ratio);
	width: 100%;
	object-fit: cover;
	height: 100%;
}



/*Pager (Outer)*/
.b_ImageCarousel .pager {
	align-items:center;
	display:flex;
	gap:8px;
	justify-content:center;
	margin-top:24px;
	width:100%;
}


/*Mobile Text*/
.b_ImageCarousel .mobile_text {
	--carousel-arrow-size:32px;
	color:var(--carousel-mobile-text-color);
	font: 24px;
	font-weight:700;
}
/*Medium*/
@media (width >= 600px) {
    .b_ImageCarousel .mobile_text {
    	display:none;
    }
}



/* Buttons */
.b_ImageCarousel .button-next,
.b_ImageCarousel .button-prev {
	color:var(--button_color);
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
@media (width >= 600px) {
	.b_ImageCarousel .button-next,
	.b_ImageCarousel .button-prev {
		display: flex;
	}
}
.b_ImageCarousel .button-prev {
    left: -30px;
}
.b_ImageCarousel .button-next {
	right: -30px;
    left: auto;
}